<template>
	<el-container>
		<el-row>
			<el-col :span="9">
				<el-card class="box-card">
					<template #header>
						<div class="clearfix">
							<span>订单信息</span>
						</div>
					</template>
					<div class="text item">
						<el-form label-position="right" label-width="80px">
							<el-form-item label="订单号">
								<template #label
									><span class="order-form-item">订单号</span></template
								>
								{{ orderModel.order_no }}
							</el-form-item>
							<el-form-item label="买家">
								<template #label
									><span class="order-form-item">买家</span></template
								>
								{{ orderModel.buy_realname }}
							</el-form-item>
							<el-form-item v-for="p in orderModel.pay_logs" :key="p.id" label="付款信息">
								<template #label
									><span class="order-form-item">付款信息</span></template
								>
								{{ p.payment_method_name }} ￥{{ getMoneyByMinute(p.money) }}
							</el-form-item>
							<el-form-item label="买家备注">
								<template #label
									><span class="order-form-item">买家备注</span></template
								>
								{{ orderModel.remark }}
							</el-form-item>
						</el-form>
					</div>
				</el-card>
				<div style="height: 10px"></div>
				<el-card class="box-card">
					<template #header>
						<div class="clearfix">
							<span>物流信息</span>
						</div>
					</template>
					<el-form label-position="right" label-width="80px">
						<el-form-item label="收货人">
							<template #label><span class="order-form-item">收货人</span></template>
							{{ orderModel.recipient_name }} / {{ orderModel.recipient_mobile }}
						</el-form-item>
						<el-form-item label="收货地址">
							<template #label
								><span class="order-form-item">收货地址</span></template
							>
							{{ addressInfo.province }} {{ addressInfo.city }}
							{{ addressInfo.area }} {{ addressInfo.street }}
							{{ addressInfo.address }}
						</el-form-item>
						<el-form-item label="卖家备注">
							<template #label
								><span class="order-form-item">卖家备注</span></template
							>
							{{ orderModel.seller_remark }}
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
			<el-col :span="15" style="padding-left: 10px">
				<el-card class="box-card">
					<template #header>
						<div class="clearfix">
							<span>订单状态</span>
						</div>
					</template>
					<div>
						<el-steps align-center :active="orderModel.step_active">
							<el-step
								v-for="s in orderModel.steps" :key="s.id"
								:title="s.title"
								:icon="s.icon"
								:description="s.description"
							>
								<template #description>
									<div>
										{{ timeTextFormat(s.description,0) }}
									</div>
									<div>
										{{ timeTextFormat(s.description,1) }}
									</div>
								</template>
							</el-step>
						</el-steps>
					</div>
					<div class="option-btns">
						<op-btn :orderRow="orderModel" btn-type="btn-horizontal" />
					</div>
				</el-card>
			</el-col>
			<el-col>
				<el-card class="box-card">
					<el-table :data="orderModel.subs">
						<el-table-column label="商品信息">
							<template #default="scope">
								<goods-info-item :row="scope.row" :baseUrl="baseUrl" type="order" />
							</template>
						</el-table-column>
						<el-table-column width="120" property="total" align="right" label="小计">
							<template #default="scope">
								{{ getMoneyByMinute(scope.row.sell_price * scope.row.total) }}
							</template>
						</el-table-column>
					</el-table>
					<div class="order-details-price-box">
						<el-row type="flex">
							<el-col :span="18" />
							<el-col :span="6" style="padding-right: 10px">
								<div class="price-item" v-for="pt in orderModel.price_table" :key="pt">
									<div class="title">{{pt.text}}</div>
									<div class="con">
										<div>
											<span v-if="pt.value > 0 && pt.is_color > 0" style="color: red">+ ￥{{ getMoneyByMinute(pt.value) }}</span>
											<span v-else-if="pt.value < 0 && pt.is_color > 0" style="color: green">- ￥{{ getMoneyByMinuteAbs(pt.value) }}</span>
											<span v-else>￥{{ getMoneyByMinute(pt.value) }}</span>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</el-container>
</template>

<script>
import opBtn from "./opBtn.vue";
export default {
	name: "shop-order-order-details",
	components: {
		opBtn
	},
	data() {
		return {
			queryId: 0,
			orderModel: {
				buy: {},
				pay_logs: [],
				subs: [],
				price_table: []
			},
			addressInfo: {},
			baseUrl: ""
		};
	},
	/*mounted() {
		if (this.$route.query.id != this.queryId) {
			this.queryId = this.$route.query.id;
			this.initData(this.queryId);
		}
	},*/
	methods: {
		initData(id) {
			console.log(id);
			this.$API.shop.order.info({ id: id }).then((res) => {
				console.log(res);
				if (res.code === 0) {
					this.orderModel = res.data;
					if (res.data.addresss) {
						this.addressInfo = res.data.addresss;
					}
				}
				else {
					this.$message.error('initData 失败,' + res.message);
				}
			});
			this.$API.gdshop.attachment.getBaseUrl().then((res) => {
				if (res.code === 0) {
					this.baseUrl = res.data.base_url;
				}
				else {
					this.$message.error('getBaseUrl 失败,' + res.message);
				}
			});
		},
		getMoneyByMinuteAbs(_value) {
			// 取绝对值
			return this.$TOOL.getMoneyByMinute(Math.abs(_value));
		},
		getMoneyByMinute(_value) {
			return this.$TOOL.getMoneyByMinute(_value);
		},
		timeFormat(_value) {
			return this.$TOOL.format(_value * 1000, "YYYY-MM-DD HH:mm:ss");
		},
		isShowBtn(_type) {
			return this.$TOOL.order.isOrderShowBtn(_type, this.orderModel);
		},
		timeTextFormat(_value,_index) {
			if (!_value) {
				return "";
			}

			let tmp = _value.split(" ");
			if (tmp.length != 2) {
				return "";
			}
			return tmp[_index];
		}
	}
};
</script>

<style lang="scss" scoped>
.order-details-price-box {
	text-align: right;
}
.order-form-item {
	color: #99a9bf;
}
.option-btns {
	margin-top: 25px;
	border-top: 1px solid #99a9bf;
	text-align: center;
}
.el-form-item--mini.el-form-item {
	margin-bottom: 0;
}
.el-step__main {
	.el-step.is-center .el-step__description {
		padding-left: 22%;
		padding-right: 22%;
	}
}
.price-item {
	display: flex;
	justify-content: space-between;
	color: #999;
	margin-top: 5px;
}
</style>
